<script setup lang="ts" name="Count">
import { ref } from 'vue'
import { useCountStore } from '@/store/count.ts'
import { storeToRefs } from 'pinia'

// 获取到pinia的countStore
const countStore = useCountStore()
// storeToRefs只会关注store中的数据，不会关注方法进行ref的包裹
const { sum, school, address, bigSum, upperSchool } = storeToRefs(countStore)

// 以下两种方式都可以拿到state中的数据
console.log('@@@', countStore.sum)
console.log('@@@', countStore.$state.sum)

// 数据
// let sum = ref(0)
let num = ref(1)
// 方法
function add() {
  // sum.value += num.value

  // 第一种修改方式，需要注意的是Vuex不能直接进行修改的
  // countStore.sum += num.value

  // 第二种修改方式：批量修改
  // countStore.$patch({
  //   sum: 888,
  //   school: '尚硅谷',
  //   address: '北京市昌平区宏福科技园',
  // })

  // 第三种修改方式：通过action的方式
  countStore.increment(num.value)
}

function sub() {
  // sum.value -= num.value
  countStore.sum -= num.value
}
</script>

<template>
  <div class="count">
    <!-- <h1>欢迎来到： {{ countStore.school }} 学习Vue，坐落于：{{ countStore.address }}</h1>
    <h1>当前求和为：{{ countStore.sum }}</h1>-->

    <h1>欢迎来到： {{ school }} 学习Vue，坐落于：{{ address }}，大写：{{ upperSchool}}</h1>
    <h1>当前求和为：{{ sum }} 扩大十倍：{{ bigSum}}</h1>
    <select v-model.number="num">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="sub">-</button>
  </div>
</template>

<style scoped>
.count {
  background-color: #dab649;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}

select,
button {
  margin: 0 10px;
  height: 20px;
}
</style>
